<template>
	<view class="content">
		<!-- <Home /> -->
		<component :is="pageComponents[activeModel]"></component>
		<!-- 底部导航 -->
		<Navition @activeModel="handlerActiveModel" />
	</view>
</template>

<script>
	import Navition from '../components/Navigation'
	import Home from '../home/index'
	import Message from '../message/index'
	import Order from '../order/index.vue'
	import Myself from '../myself/index.vue'
	
	export default {
		components: {
			Navition,
			Home,
			Message,
			Order,
			Myself
		},
		data() {
			return {
				// 当前激活的页面
				activeModel: 'home',
				// 所有的页面配置
				pageComponents: {
					home: Home,
					message: Message,
					order: Order,
					myself: Myself
				},
			}
		},
		mounted() {
		},
		methods: {
			handlerActiveModel(activeModel) {
				this.activeModel = activeModel
			}
		}
	}
</script>

<style scoped lang="scss">
	.content {
		/* display: flex; */
		flex-direction: column;
		align-items: center;
		justify-content: center;
		background-image: url('/static/default-bg.jpg');
		background-size: cover;
		height: 100vh;
		width: 750rpx;
		overflow-y: auto;
	}
</style>
